<!--数字人管理——任务列表-->
<template>
  <div class="ele-body">
    <el-card
      shadow="never"
      body-style="padding: 22px;"
    >
      <div class="flex-align-center width100">
        <div class="flex-column numberCount">
          <span>总任务</span>
          <div>{{numAll.allCount || 0}}</div>
        </div>
        <el-divider direction="vertical" class="divider-class"></el-divider>
        <div class="flex-column numberCount">
          <span>发布总数</span>
          <div>{{numAll.releaseCount || 0}}</div>
        </div>
        <el-divider direction="vertical" class="divider-class"></el-divider>
        <div class="flex-column numberCount">
          <span>曝光总数</span>
          <div>{{numAll.viewCount || 0}}</div>
        </div>
        <el-divider direction="vertical" class="divider-class"></el-divider>
        <div class="flex-column numberCount">
          <span>点赞总数 </span>
          <div>{{numAll.likeCount || 0}}</div>
        </div>
        <el-divider direction="vertical" class="divider-class"></el-divider>
        <div class="flex-column numberCount">
          <span>评论总数</span>
          <div>{{numAll.commentCount || 0}}</div>
        </div>
      </div>
    </el-card>
    <el-form
      :hide-required-asterisk="true"
      ref="form"
      :model="form"
      label-width="80px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    >
      <el-card
        style="margin: 15px 0"
        shadow="never"
        body-style="padding: 22px;"
      >
        <el-row :gutter="15">
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="任务名称:" prop="displayName" class="width80">
              <el-input
                v-model="form.taskName"
                placeholder="请输入任务名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="形象名称:" prop="displayName" class="width80">
              <el-input
                v-model="form.imgName"
                placeholder="请输入形象名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="12" :lg="8" :xl="8">
            <el-form-item label="创建时间:" prop="datetime" class="width80">
              <el-date-picker
                v-model="datetime"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="ele-fluid"
                @change="select"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col  :xs="12" :sm="12" :lg="12" :xl="12" class="btn-class">
            <el-button
              icon="el-icon-zoom-out"
              size="small"
              type="primary"
              class="colorBlue"
              @click="see()"
            >
              筛选
            </el-button>
            <el-button
              icon="el-icon-refresh-right"
              size="small"
              class="resetting-btn"
              @click="resetting()"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <el-card
      shadow="never"
      body-style="padding: 22px;"
    >
      <excel-export ref="table" :activityList="form" @infoAll="infoAll" />
    </el-card>
  </div>
</template>

<script>
  import ExcelExport from './components/excel-export.vue';
  export default {
    name: "index",
    components: { ExcelExport },
    data() {
      return {
        numAll:{},
        datetime:[],
        form: {},
      }
    },
    activated(){
      this.query()
    },
    created(){
    },
    methods:{
      /* 子组件emit 返回总数*/
      infoAll(e){
        console.log('组件emit 返回总数e',e)
        this.numAll=e
      },
      // 查询日期
      select(e){
        console.log("日期选择e============",e,'form.datetime',this.datetime)
        if(this.datetime){
          Object.assign( this.form, {
            startTime:  this.datetime[0],
            endTime:  this.datetime[1]
          })
        }
      },
      // 查询
      see(){
        if(!this.form.imgName){
          delete this.form.imgName
        }
        if(!this.form.taskName){
          delete this.form.taskName
        }
        if(!this.datetime){
          this.datetime=''
          delete this.form.startTime
          delete this.form.endTime
        }
        this.query()
      },
      // 重置
      resetting(){
        this.datetime=''
        delete this.form.startTime
        delete this.form.endTime
        delete this.form.taskName
        delete this.form.imgName
        this.query()
      },
      // 查询矩阵账号【分页查询】
      query(){
        console.log("this.form=========",this.form)
        if(!this.form.videoMaterial){
          delete this.form.videoMaterial
        }
        if(!this.form.activityName){
          delete this.form.activityName
        }
        this.$nextTick(() => {
          console.log('this.$refs[\'table\']',this.$refs['table'])
          this.$refs['table'].reload()
        })
      },
    }
  }
</script>

<style scoped lang="less">
  /*表格头部按钮*/
  .btn-class{
    margin: 0 10px;
    .el-button{
      padding: 0;
      width: 84px;
      border-radius: 2px;
      height: 33px;
    }
  }
  .numberCount{
    width: calc(100% / 5);
    span{
      color: #000;
      font-size: 16px;
    }
    div{
      margin-top: 10px ;
      color: #1E6CEB;
      font-size: 25px;
    }
  }

</style>
